import { memo } from "react"
import { formatCurrency } from "@/utils/format"
import styled from "@emotion/styled"

const SummaryCardWrapper = styled.div`
    background: linear-gradient(158.01deg, #279eff -23.29%, #0057ff 85.62%);
    color: white;
    border-radius: 10rem;
    height: 108rem;
    padding: 12rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
`

const Block = styled.div`
    flex: 1;
    height: 44rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
`

const Amount = styled.div`
    font-weight: 500;
    font-size: 18rem;
    height: 28rem;
    line-height: 28rem;
    letter-spacing: 0%;
    vertical-align: middle;
    text-align: center;
`

const Label = styled.div`
    font-weight: 400;
    font-size: 12rem;
    height: 16rem;
    line-height: 16rem;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
`

const BlockWrapper = styled.div`
    display: flex;
`

const Description = styled.div`
    font-weight: 500;
    font-size: 16rem;
    height: 24rem;
    line-height: 24rem;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: capitalize;
`

const Line = styled.div`
    width: 1rem;
    height: 44rem;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.1) 100%
    );
`

export const BetRecordSummaryCard = memo(
    ({ totalBet, totalWin }: { totalBet: string; totalWin: string }) => {
        return (
            <SummaryCardWrapper>
                <Description children={"Total"} />
                <BlockWrapper>
                    <Block>
                        <Amount>{totalBet ? formatCurrency(Number(totalBet)) : "--"}</Amount>
                        <Label>Bet</Label>
                    </Block>
                    <Line />
                    <Block>
                        <Amount>{totalWin ? formatCurrency(Number(totalWin)) : "--"}</Amount>
                        <Label>Win</Label>
                    </Block>
                </BlockWrapper>
            </SummaryCardWrapper>
        )
    },
)
